<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>wwwww</title>
    <link rel="stylesheet" href="/hg/css/main.css">
    <link rel="stylesheet" href="/hg/lib/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body class="container">
    <h1>the brand page</h1>
    <form>
        <input type="text" name="name"/>
        <input type="button" name="search" onclick="doQueryBrands()" value="搜索"/>
        <input type="button" name="add" onclick="doAddUI()" value="新增"/>
    </form>
    <table class="table">
        <!--thead用于定义table中的列标题部分-->
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>remark</th>
            <th>createdTinme</th>
            <th>operation</th>
        </tr>
        </thead>
        <!--tbody用于定义table中的表体部分-->
        <tbody>
        <tr th:each="brand:${list}">
            <td th:text="${brand.id}"></td>
            <td th:text="${brand.name}"></td>
            <td th:text="${brand.remark}"></td>
            <td th:text="${#dates.format(brand.createdTime, 'yyyy/MM/dd HH:mm')}"></td>
            <td>
                <button type="button" th:onclick="doDeleteById('[[${brand.id}]]')">删除</button>
                <button type="button" th:onclick="doFindById('[[${brand.id}]]')">修改</button>
            </td>
        </tr>
        </tbody>
    </table>
    <script>

        function doFindById(id) {
            location.href=`http://localhost:8080/brand/doFindById/${id}`
        }
        function doAddUI() {
            location.href= `http://localhost:8080/brand/doAddUI`
        }
        function doDeleteById(id) {
            location.href=`http://localhost:8080/brand/doDeleteById/${id}`
        }
        function doQueryBrands() {
            //获取表单输出的品牌名称
            let name = document.forms[0].name.value;
            //访问服务端hid的url
          location.href = `/brand/doFindBrands/${name}`;
        }
    </script>
</body>
</html>